import React, { Component } from 'react'
import { Card, List, Avatar, Button, Badge } from 'antd'
import { connect } from 'react-redux'
import {
  setMsgRead,
  delMsg,
  setAllRead
} from '../../store/msg/actionCreators.js'
class Message extends Component {
	render() {
    
		return (
			<Card 
        title="消息中心"
        extra={
          <Button onClick={
            ()=>{
              this.props.setAllRead()
            }
          }>全部已读</Button>
        }
        >
				<List
				    itemLayout="horizontal"
				    dataSource={this.props.msgLists}
				    renderItem={(item, index) => (
				      <List.Item
                actions={[
                  <Button 
                    disabled={ item.hasRead }
                    size="small" 
                     onClick = {
                       ()=>{
                         // 点击已读
                         this.props.setMsgReaded(index)
                       }
                     }
                    >点击已读</Button>,
                  <Button size="small" 
                    onClick= {
                      ()=>{
                        // 点击删除
                        this.props.delMsg(index)
                      }
                    }
                  danger>删除 </Button>
                ]}
              >
				        <List.Item.Meta
				          avatar={
                    <Badge dot={!item.hasRead}>
                      <Avatar src={ item.avatar } />
                    </Badge>
                   }
				          title={<a href="https://ant.design">{item.title}</a>}
				          description={ item.content }
				        />
              
				      </List.Item>
				    )}
				  />
			</Card>
		)
	}
}
const mapStateToProps = (state)=>{
  return {
    msgLists : state.msg.msgLists
  }
}
const mapDispatchToProps = (dispatch)=>{
  return {
    setMsgReaded : (index)=>{
       dispatch(setMsgRead(index))
    },
    delMsg: (index)=>{
      dispatch(delMsg(index))
    },
    setAllRead : ()=>{
       dispatch(setAllRead())
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Message)